<template>
    <div class="statistics-box">
            <div class="statistics">
                <img src="/static/images/bg.png">
                <div class="title-box">
                    <div class="title">{{statisticsData.selectDefault}}</div>
                    <div class="working-hours">
                        <img src="/static/images/shangban.png" mode="widthFix">
                        <span class="text">上班时间</span>
                        <span class="morning">{{workingHours.morningStart || ''}}-{{workingHours.morningEnd || ''}}</span>
                        <span class="afternoon">{{workingHours.afternoonStart || ''}}-{{workingHours.fternoonEnd || ''}}</span>
                    </div>
                </div>
                <div class="count">
                    <img src="/static/images/info_bg.jpg">
                    <div class="left">
                        <div class="text">单位人数</div>
                        <div class="num">{{statisticsData.personNum}}人</div>
                        <div class="Probability">(在岗率：{{statisticsData.onlinePro}}%)</div>
                    </div>
                    <div class="center">
                        <div class="text">中共党员</div>
                        <div class="num">{{statisticsData.partyNum}}人</div>
                        <div class="Probability">(党员率：{{statisticsData.partyPro}}%)</div>
                    </div>
                    <div class="right">
                        <div class="right-list">
                            <div class="info">
                                <span>在岗:</span>
                                <span>{{statisticsData.onlineNum}}人</span>
                            </div>
                            <div class="info">
                                <span>开会:</span>
                                <span>{{statisticsData.meetingNum}}人</span>
                            </div>
                        </div>
                        <div class="right-list">
                            <div class="info">
                                <span>外出:</span>
                                <span>{{statisticsData.outNum}}人</span>
                            </div>
                            <div class="info">
                                <span>培训:</span>
                                <span>{{statisticsData.trainingNum}}人</span>
                            </div>
                        </div>
                        <div class="right-list">
                            <div class="info">
                                <span>暂离:</span>
                                <span>{{statisticsData.leaveNum}}人</span>
                            </div>
                            <div class="info">
                                <span>请假:</span>
                                <span>{{statisticsData.takeLeaveNum}}人</span>
                            </div>
                        </div>
                        <div class="right-list">
                            <div class="info">
                                <span>休息:</span>
                                <span>{{statisticsData.rest}}人</span>
                            </div>
                            <div class="info">
                                <span>其他:</span>
                                <span>{{statisticsData.other}}人</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

<script>
export default {
    props:{
        statisticsData:{
            type: Object,
            default: {}
        },
        workingHours:{
            type: Object,
            default: {}
        }
    },
    created(){
        console.log(123)
        console.log(this.statisticsData)
        console.log(this.workingHours)
    }
}
</script>

<style lang="scss" scoped>
    .statistics-box{
        padding: 10rpx 15rpx 0;
        border-radius: 6rpx;
        .statistics{
            width: 100%;
            height: 320rpx;
            position: relative;
            border-radius: 6rpx;
            overflow: hidden;
            box-shadow:0px 12rpx 6rpx 0px rgba(62,62,62,0.41);
            >img{
                width: 100%;
                height: 100%;
                z-index: -1;
                border-radius: 6rpx;
                overflow: hidden;
            }
            .title-box{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 126rpx;
                background:rgba(252,125,11,.4);
                padding: 0 6rpx 0 18rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .title{
                    font-size: 30rpx;
                    letter-spacing: 4rpx;
                    color: #FFC400;
                    font-weight:bold;
                }
                .working-hours{
                    width:177rpx;
                    height:100rpx;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-content: center;
                    flex-direction: column;
                    img{
                        width:177rpx;
                        height:100rpx;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 0;
                    }
                    .text{
                        font-size:26rpx;
                        font-weight:bold;
                        color:rgba(255,196,0,1);
                        z-index: 2;
                        text-align: center;
                        position: relative;
                        left: -4rpx;
                        top: -2rpx;
                    }
                    .morning,
                    .afternoon{
                        font-size:24rpx;
                        font-weight:bold;
                        color:rgba(255,196,0,1);
                        z-index: 2;
                        text-align: center;
                        margin-top: 2rpx;
                    }
                    .morning{
                        top:41rpx;
                    }
                    .afternoon{
                        top:68rpx;
                    }
                }
            }
            .count{
                position: absolute;
                left: 0;
                bottom: 0;
                width:100%;
                height:180rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-radius: 0 0 6rpx 6rpx;
                overflow: hidden;
                >img{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width:100%;
                    height:180rpx;
                    z-index: 1;
                    border-radius: 0 0 6rpx 6rpx;
                    overflow: hidden;
                }
                .left,
                .center{
                    width: 203rpx;
                    height: 180rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    z-index: 2;
                    .text{
                        margin-top: 21rpx;
                        font-size:30rpx;
                        font-weight:800;
                        color:rgba(255,196,0,1);
                    }
                    .num{
                        margin-top: 14rpx;
                        font-size:55rpx;
                        font-weight:800;
                        color:rgba(255,196,0,1);
                    }
                    .Probability{
                        margin-top:14rpx;
                        font-size:22rpx;
                        font-weight:bold;
                        color:rgba(255,196,0,1);
                    }
                }
                .left{
                    border-right: 4rpx solid #db3600;
                    border-bottom: 4rpx solid #bd1207;
                    border-radius: 0 0 0 4rpx;
                    overflow: hidden;
                }
                .center{
                    border-left: 4rpx solid #ff7800;
                    border-right: 4rpx solid #db3600;
                    border-bottom: 4rpx solid #bd1207;
                }
                .right{
                    width: 350rpx;
                    height: 180rpx;
                    border-left: 4rpx solid #ff7800;
                    border-bottom: 4rpx solid #bd1207;
                    padding: 20rpx 30rpx 0;
                    z-index: 2;
                    border-radius: 0 0 6rpx 0;
                    overflow: hidden;
                    .right-list{
                        width:284rpx;
                        height: 37rpx;
                        display: flex;
                        justify-content: space-between;
                        justify-items: center;
                        font-size:28rpx;
                        font-weight:bold;
                        color:rgba(255,196,0,1);
                        .info{
                            width: 128rpx;
                            height: 37rpx;
                            display: flex;
                            justify-content: space-between;
                            justify-items: center;
                        }
                    }
                }
            }
        }
    }
</style>